<template>
  <div class="footer-container">
    <el-row class="footer-row">
      <el-col :xs="24" :md="12">
         <div class="social-links">
            <el-link 
                :underline="false" 
                class="social-icon"
                @click="toggleWeChat"
                >
                <div class="social-link">
                    <img :src="weixinurl" alt="微信" width="20" height="20">
                </div>
            </el-link>
            <el-dialog v-model="showWeChat" title="关注我的微信" width="300px">
                <div style="text-align: center">
                    <img :src="weixinqrcodeurl" alt="微信二维码" style="width: 200px">
                    <p style="margin-top: 10px">扫码关注微信公众号</p>
                </div>
            </el-dialog>

            <a href="#" target="_blank" rel="nofollow" class="social-link">
                <el-icon :size="20"><i-ep-promotion /></el-icon>
            </a>
        </div>
      </el-col>
      <el-col :xs="24" :md="12" style="text-align: right;">
        <el-link :underline="false" href="#">
          © 2025 cblx Design. 保留所有权利 
        </el-link>                  
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import weixinImg from '@/assets/images/weixin.png'
import weixinqrcode from '@/assets/images/weixinqrcode.jpg'

const weixinurl = ref(weixinImg)
const weixinqrcodeurl = ref(weixinqrcode)  
const showWeChat = ref(false)

const toggleWeChat = () => {
  showWeChat.value = !showWeChat.value
}
</script>

<style scoped>
.footer-container {
  background-color: #ffffff;
  color: var(--el-text-color);
  padding: 20px 0;
  border-top: 1px solid var(--el-border-color);
}

.footer-row {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1160px;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: var(--el-color-white);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--el-color-info-light-8);
    transition: background-color 0.2s ease;
}

.social-link:hover {
    background-color: var(--el-color-info);
}


@media (max-width: 768px) {
  .footer-row {
    padding: 0 15px;
  }
  
  .social-links {
    justify-content: center;
    margin-bottom: 15px;
  }
  
  .el-col {
    text-align: center !important;
  }
}

@media (max-width: 576px) {
  .social-links {
    gap: 0.5rem;
  }
  
  .social-link {
    width: 2rem;
    height: 2rem;
  }
}
</style>